<template>
    <div style="border: 1px solid #ccc">
      <!-- 工具栏组件，绑定编辑器实例和工具栏配置 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <!-- 编辑器主体，支持 v-model 双向绑定内容，配置编辑器参数和事件监听 -->
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="modelValueProxy"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange="handleChange"
        @onDestroyed="handleDestroyed"
        @onFocus="handleFocus"
        @onBlur="handleBlur"
        @customAlert="customAlert"
        @customPaste="customPaste"
      />
    </div>
  </template>
  
  <script setup>
  // 引入 WangEditor 样式
  import "@wangeditor/editor/dist/css/style.css";
  // 引入 Vue 相关API
  import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from "vue";
  // 引入 WangEditor for Vue 组件
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
  // 用于定义 props 和 emits
  import { defineProps, defineEmits } from "vue";
  
  /**
   * 组件 props 定义
   * @property {String} modelValue - 富文本内容，支持 v-model 双向绑定
   * @property {Object} toolbarConfig - 工具栏配置，详见官方文档
   * @property {Object} editorConfig - 编辑器配置，详见官方文档
   * @property {String} mode - 编辑器模式，'default' 或 'simple'
   */
  const props = defineProps({
    modelValue: { type: String, default: "" },
    toolbarConfig: { type: Object, default: () => ({}) },
    editorConfig: {
      type: Object,
      default: () => ({ placeholder: "请输入内容..." })
    },
    mode: { type: String, default: "default" }
  });
  
  /**
   * 组件事件定义
   * @event update:modelValue - v-model 内容变更
   * @event onCreated - 编辑器创建完成
   * @event onChange - 编辑器内容变化
   * @event onDestroyed - 编辑器销毁
   * @event onFocus - 编辑器聚焦
   * @event onBlur - 编辑器失焦
   * @event customAlert - 自定义弹窗
   * @event customPaste - 自定义粘贴
   */
  const emit = defineEmits([
    "update:modelValue",
    "onCreated",
    "onChange",
    "onDestroyed",
    "onFocus",
    "onBlur",
    "customAlert",
    "customPaste"
  ]);
  
  // 编辑器实例，必须用 shallowRef，便于后续调用 API
  const editorRef = shallowRef();
  // 富文本内容，支持 v-model 双向绑定
  const modelValueProxy = ref(props.modelValue);
  
  // 监听父组件传入的内容变化，保持同步
  watch(
    () => props.modelValue,
    val => {
      if (val !== modelValueProxy.value) modelValueProxy.value = val;
    }
  );
  // 监听编辑器内容变化，向父组件同步
  watch(modelValueProxy, val => {
    emit("update:modelValue", val);
  });
  
  // 编辑器生命周期和自定义事件处理
  const handleCreated = editor => {
    editorRef.value = editor; // 记录 editor 实例
    emit("onCreated", editor);
  };
  const handleChange = editor => {
    emit("onChange", editor);
  };
  const handleDestroyed = editor => {
    emit("onDestroyed", editor);
  };
  const handleFocus = editor => {
    emit("onFocus", editor);
  };
  const handleBlur = editor => {
    emit("onBlur", editor);
  };
  const customAlert = (info, type) => {
    emit("customAlert", info, type);
  };
  const customPaste = (editor, event, callback) => {
    emit("customPaste", editor, event, callback);
  };
  
  // 组件销毁时，及时销毁编辑器实例，防止内存泄漏
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });
  </script>
  